<!-- 二级评论 -->

<template>
  <div v-if="props.secondComments && props.secondComments.length">
    <div
        class="sub-reply-container"
        id="child-reply"
        v-for="(child, childIndex) in props.secondComments"
        :key="childIndex"
    >
      <div class="listbox-top-user">
        <el-avatar :size="40" v-if="child.userImg===''" src="/profile.jpg" />
        <el-badge v-else  :value="child.contentFlag === 1 ? '作者' : ''" :offset="[-31.6, -1]">
          <el-avatar :size="45"  :src="IP+ baseURL +child.userImg" />
        </el-badge>

        <p>
          <span>{{ child.userName }} </span>
          <el-icon>
            <CaretRight/>
          </el-icon>
          <span>{{ child.replyUserName }}</span>
        </p>
      </div>
      <div class="listbox-middle-root">{{ child.commentDetails }}</div>
      <div class="listbox-bottom">
        <span>发布时间：{{ child.commentDate }}</span>
        <!-- 回复的是二级评论 -->
        <span v-if="child.userId !== userStore.id" @click="handleReply(child)">回复</span>
        <span v-if="child.userId === userStore.id" @click="emit('remove-reply',child)">删除</span>
        <span v-if="child.status === -1" @click="emit('add-like',child.id,child.contentId)">点赞  {{child.likeNum}}</span>
        <span v-else style="color: #bd1212" @click="emit('close-like',child.id,child.contentId)" >已点赞  {{child.likeNum}}</span>
      </div>
    </div>
  </div>
</template>

<script setup>

import useUserStore from "@/stores/user.js";
import {CaretRight} from "@element-plus/icons-vue";
import {onMounted} from "vue";
import {ElMessage} from "element-plus";
import {addReviewLog} from "@/api/article.js";
const userStore = useUserStore()
const baseURL = import.meta.env.VITE_APP_BASE_API
const IP = import.meta.env.VITE_APP_BASE_IP
// 接收父组件传过来的值：二级留言
const props = defineProps({
  secondComments: {
    type: Array,
    default: [],
  },
});

// 声明需要抛出的事件
const emit = defineEmits(["handle-reply","remove-reply"]);


const handleReply = (item) => {
  // 【注意】这里不以对象形式包裹发送，会导致嵌套；因为父组件中回复一级评论与子级评论共用一个传值方法
  emit("handle-reply", item);
};
onMounted(()=>{
})
</script>

<style lang="scss" scoped>
.sub-reply-container {
  margin: 20px 0 0 65px;

  .listbox-top-user {
    display: flex;

    p {
      margin-left: 10px;
      width: 100%;

      // 姓名条
      span:first-child {
        margin-left: 5px;
        margin-right: 1px;
        font-size: 13px;
        padding: 2px;
        background-color: #b74b4b;
        color: white;
        border-radius: 5px;
        position: relative;
        bottom: 4px;
      }

      // 身份标签
      span:last-child {
        //margin-left: 1px;
        font-size: 13px;
        padding: 2px;
        background-color: #1c6ca1;
        color: white;
        border-radius: 5px;
        position: relative;
        bottom: 4px;
      }
    }
  }

  .listbox-middle-root,
  .listbox-bottom {
    margin-left: 38px;
  }

  .listbox-bottom {
    font-size: 12px;
    color: #9499a0;
    margin: 10px 0 10px 35px;
    display: flex;

    span {
      display: block;
      margin-right: 20px;
    }

    span:nth-last-child(-n+2):hover {
      cursor: pointer;
      color: #990055;
    }
  }
}
</style>
